<template>
  <div class="container">
    <div class="log">
      <h1>FOOD BEAR</h1>
      <form>
        <p>
          <i class="user"></i>
          <input v-model="from.account" type="text" placeholder="手机号" autofocus="autofocus"/>
        </p>
        <p>
          <i class="password"></i>
          <input v-model="from.password" type="password" placeholder="密码:默认为身份证后四位"/>
        </p>
        <div>
          <div class="confirm" >
            <p>
              <input v-model="from.code" style="width: 60%;float: left" type="text" placeholder="验证码(字母使用小写)"/>
            </p>
          </div>
          <div>
            <ConfirmCode/>
          </div>
        </div>
        <div class="group">
          <el-select id="sys" name="cx" v-model="from.status" class="form-control-lg" placeholder="请选择身份">
            <el-option :value="r.sid" :label="r.sname" v-for="r in rules" :key="r"></el-option>
          </el-select>
        </div>
        <p>
          <input @click.stop="submit" type="button" id="submit" value="登录" />
        </p>
      </form>
    </div>
    <div class="reg">
      <p>欢迎尊敬的客户来登录</p>
      <p>
        <a href="/">
          返回主页面
          <i class="right"></i>
        </a>
      </p>
    </div>
  </div>
</template>

<script>
import ConfirmCode from "@/components/ConfirmCode";
export default {
  name: "Login",
  components:{
    ConfirmCode
  },
  data(){
    return{
      from:{
        account:'',
        password:'',
        code:'',
        status:''
      },
      rules:[]
    }
  },
  methods:{
    submit(){
      let code = sessionStorage.getItem("code")
      if(this.from.code !== code){
        this.$message.error('验证码错误!');
        return
      }
      axios({
        method:'post',
        url:'http://localhost:8081/login/login',
        data:{
          account: this.from.account,
          password: this.from.password,
          code: this.from.code,
          status: this.from.status
        }
      }).then(res=>{
        if (res.data.code === 0){
          this.$message({
            message: '登陆成功!',
            type: 'success'
          });
          console.log(res)
          if (res.data.identity === "boss"){
            sessionStorage.setItem("boss",JSON.stringify(res.data.data))
            sessionStorage.removeItem("agency")
            location.href="/productManager";
          }else if (res.data.data.aqx === 1){
            sessionStorage.setItem("agency",JSON.stringify(res.data.data))
            sessionStorage.removeItem("boss")
            location.href="/agencyManager";
          }else if (res.data.data.aqx === 0){
            sessionStorage.setItem("agency",JSON.stringify(res.data.data))
            sessionStorage.removeItem("boss")
            location.href="/agencyBossManager";
          }else{
            this.$message.error(res.data.msg);
          }
        }else{
          this.$message.error(res.data.msg);
        }
      }).catch(err=>{
        console.log(err)
      })
    }
  },
  mounted() {
    axios({
      method:'get',
      url:'http://localhost:8081/login/getUserStatus'
    }).then(res => {
      this.rules = res.data.data
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


a {
  text-decoration: none;
}

input {
  outline: none;
}

.container {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.log {
  background: #fff;
  padding: 70px 50px;
  box-shadow: -1px 0px 10px 2px #E8EBF0;
}

.log h1 {
  font-family: "微软雅黑";
  font-size: 42px;
  text-align: center;
  margin-bottom: 40px;
  color: #222222;
}

.log input {
  width: 375px;
  padding: 14px 20px 14px 40px;
  margin-bottom: 20px;
  border: 1px solid #E5E5E5;
  border-radius: 5px;
  color: #BBB8C1;
}

.log input:focus {
  border: 1px solid #cccccc;
}

.log p {
  position: relative;
}

.user {
  display: inline-block;
  width: 20px;
  height: 24px;
  background: url(../../assets/img/yonghuming.png);
  position: absolute;
  top: 10px;
  left: 10px;
}

.password {
  display: inline-block;
  width: 19px;
  height: 25px;
  background: url(../../assets/img/mima.png);
  position: absolute;
  top: 10px;
  left: 10px;
}

#submit {
  background: #7554BF;
  color: #fff;
  border-radius: 5px;
  /*变小手*/
  cursor: pointer;
}

#submit:hover {
  background: #6531bf;
}

.reg {
  height: 430px;
  padding: 100px 50px;
  color: #FFFFFF;
  background: url(../../assets/img/bg-login.png);
  background-size: cover;
}

.reg p {
  margin-bottom: 50px;
}

.reg a {
  color: #f3f3f3;
}

.reg a:hover {
  color: #FFFFFF;
}

.right {
  background: url(../../assets/img/youjiantou.png);
  width: 28px;
  height: 28px;
  display: inline-block;
  position: relative;
  top: 8px;
  left: 4px;
}


/*响应式*/

@media (max-width:600px) {
  .container{
    flex-wrap:wrap;
  }
  .log input{
    width: 320px;
  }
  .reg{
    width: 420px;
    height: 300px;
    margin-top: 20px;
    padding: 50px;
  }
}
.form-control-lg{
  width: 100%;
  margin-bottom: 20px;
}
</style>
